Currently a user can enter a name consisting of only space characters (e.g., " "). Can you enforce a stricter validation rule using the pattern attribute to disallow any name that contains only space characters?

Can consider wrapping the input element inside the label tags:

            <label>
              Red
              <input type="radio" name="colour" value="red" required />
            </label>

This way, we don't need to use the id and for attributes.

Hi @cjyuan ,

Below are the changes i have made according to the feedback given:

• I’ve wrapped the colour inputs inside their labels
• I’ve also added additional requirements to the name field to prevent the issue " " referred.

Regarding the remaining Lighthouse warning, without using CSS it isn’t possible to increase the physical size of form controls, so I’ve applied the best possible HTML-only solution. According to the bot, however, this scores 100 on Accessibility

Netlify may be using a different version of Lighthouse or different settings when calculating the accessibility score. I think the browser's score is more reliable.

The no-CSS requirement is unusual in practice, but the fix is not difficult (and a bit silly). Just think of it as a puzzle.
Can you try any of the following options to reach a browser's Lighthouse accessibility score of 100?

1. Use CSS (I will accept the use of CSS), or
2. Ask ChatGPT "How to overcome the 'Touch targets do not have sufficient size or spacing' problem without using CSS".